<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="origin-trial"
          content="AjU8lA9nUt9ly2bNwJ2ZZQfka1hePBYt56dwHgHEj9Un84AtzB+xrr9wr2Qf2PnVV2ilepcDU+f+EQa5qBHbawgAAABheyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjYzMzQyIiwiZmVhdHVyZSI6IlVucmVzdHJpY3RlZFNoYXJlZEFycmF5QnVmZmVyIiwiZXhwaXJ5IjoxNzUzMTQyNDAwfQ==">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Jessibuca Pro 点播 demo</title>
    <script src="./vconsole.js"></script>
    <script src="./js/jessibuca-pro-vr-demo.js"></script>
    <script src="./js/jessibuca-pro-demo.js"></script>
    <link rel="stylesheet" href="./demo.css">
    <style>
        .container-shell:before {
            content: "jessibuca pro 点播 demo";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="mseSupport264" style="color: green;display: none">支持MSE H264解码；</span>
                <span id="mseSupport" style="color: green;display: none">支持MSE H265解码；</span>
                <span id="mseNotSupport264" style="color: red;display: none">不支持MSE H264解码；</span>
                <span id="mseNotSupport"
                      style="color: red;display: none">不支持MSE H265解码,会自动切换成wasm解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
                <span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
                <span id="wcsNotSupport264"
                      style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
                <span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wasmSupport" style="color: green;display: none">支持WASM解码；</span>
                <span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码；</span>
                <span id="simdMtSupport" style="color: green;display: none">支持WASM WASM(SIMD) 多线程解码；</span>
                <span id="wasmNotSupport" style="color: red;display: none">不支持WASM解码；</span>
                <span id="simdNotSupport"
                      style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码；</span>
                <span id="simdMtNotSupport" style="color: red;display: none">不支持WASM WASM(SIMD) 多线程解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                <div>
                    <span>硬解码：</span>
                    <input
                        type="checkbox"
                        id="useMSE"
                    /><span>MediaSource</span>
                    <input
                        type="checkbox"
                        id="useWCS"
                    /><span>Webcodec</span>
                </div>
                <div>
                    <span>软解码：</span>
                    <input
                        checked
                        type="checkbox"
                        id="useWASM"
                    /><span>WASM</span>
                    <input
                        type="checkbox"
                        id="useSIMD"
                    /><span>WASM(SIMD)</span>
                    <input
                        type="checkbox" ,
                        id="isFFmpegSIMD"
                        onclick="replay()"
                    /><span>isSIMD(V2)</span>
                    <input
                        type="checkbox"
                        id="useSIMDMThreading"
                        onclick="replay()"
                    /><span>启动多线程（WASM,WASM(SIMD)解码支持）</span>
                    <span style="color: green">默认使用wasm解码器</span>
                </div>
            </div>
        </div>
        <div class="input">
            <div>
                <input
                    type="checkbox"
                    id="isMP4"
                /><span>强制MP4</span>
                <input
                    type="checkbox"
                    id="isHls"
                /><span>强制HLS</span>
                <button onclick="replay()">重播</button>
            </div>
        </div>
        <div class="input">
            <div>
                <div>
                    <span style="color:red">http:</span>http://jessibuca.monibuca.com/video/vr.mp4
                </div>
                <div>
                    <span style="color:red">https:</span>https://jessibuca.com/video/vr.mp4
                </div>
            </div>

        </div>
        <div class="input">
            <div>输入URL：</div>
            <input
                autocomplete="on"
                id="playUrl"
                value=""
            />
        </div>
        <div class="input">
            <button id="play">播放</button>
            <button id="playVodPause">停止</button>
        </div>
        <div class="input">
            <button onclick="playVodNextFrame()">逐帧播放</button>
            <button onclick="playVodExitNextFrameAndPlay()">退出逐帧播放</button>
        </div>
        <div class="input">
            <button id="playVodForward">快进10s</button>
            <button id="playVodBackword">快退10s</button>
            <select id="forward" onchange="changeForward()">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="4">4</option>
            </select>
            <button onclick="getPlayVodIsPause()">当前状态</button>
            <button onclick="toggleControlBar()">隐藏/显示控制栏</button>
        </div>
        <div class="input">
            <div>
                <button id="enterVr" onclick="enterVr()">进入vr模式</button>
                <button id="exitVr" onclick="exitVr()">退出vr模式</button>
                <span>初始化方向:Yaw(°)</span><input type="number" style="width: 50px" value="0" id="initYaw"><span>Pitch(°):</span><input
                type="number" style="width: 50px" value="0" id="initPitch">
            </div>

        </div>
        <div class="input">
            <button onclick="enableSensor()">申请运动传感器权限(iOS 13+)</button>
            <button onclick="setGyroMode('VR')">打开陀螺仪</button>
            <button onclick="setGyroMode('none')">关闭陀螺仪</button>
        </div>
        <div class="input">
            <button onclick="lookAt({yaw: 0, pitch: 0})">前方(0°,0°)</button>
            <button onclick="lookAt({yaw: 180, pitch: 0})">后方(180°,0°)</button>
            <button onclick="lookAt({yaw: 90, pitch: 0})">左方(90°,0°)</button>
            <button onclick="lookAt({yaw: -90, pitch: 0})">右方(-90°,0°)</button>
            <button onclick="lookAt({yaw: 0, pitch: 90})">上方(0°,90°)</button>
            <button onclick="lookAt({yaw: 0, pitch: -90})">下方(0°,-90°)</button>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
        </div>
    </div>
</div>
<script src="./demo.js"></script>

<script>
    var $player = document.getElementById('play');
    var $playVodPause = document.getElementById('playVodPause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $useMSE = document.getElementById('useMSE');
    var $useSIMD = document.getElementById('useSIMD');
    var $isFFmpegSIMD = document.getElementById('isFFmpegSIMD');
    var $useWCS = document.getElementById('useWCS');
    var $useWASM = document.getElementById('useWASM');
    var $playVodForward = document.getElementById('playVodForward');
    var $playVodBackword = document.getElementById('playVodBackword');
    var $isHls = document.getElementById('isHls');
    var $isMP4 = document.getElementById('isMP4');
    var $useSIMDMThreading = document.getElementById('useSIMDMThreading');
    var $initYaw = document.getElementById('initYaw');
    var $initPitch = document.getElementById('initPitch');

    var forceNoOffscreen = true; //
    var jessibuca = null;
    var isPlayVodPause = false;

    var currentHost = window.location.hostname;
    if (currentHost === 'jessibuca.com') {
        $playHref.value = 'https://jessibuca.com/video/vr.mp4';
    } else if (currentHost === 'jessibuca.monibuca.com/') {
        $playHref.value = 'http://jessibuca.monibuca.com/video/vr.mp4';
    }

    function create() {
        const showOperateBtns = true;
        jessibuca = new JessibucaPro({
            playType: 'playVod',
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            decoder: './js/decoder-pro.js',
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            debugLevel: 'debug',
            isFFmpegSIMD: $isFFmpegSIMD.checked === true,
            useMThreading: $useSIMDMThreading.checked === true,
            decoderErrorAutoWasm: false,
            timeout: 10000,
            // showPerformance: true,
            showBandwidth: showOperateBtns, // 显示网速
            showPlaybackOperate: showOperateBtns,
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                performance: showOperateBtns,
            },
            // hiddenControl:true,
            playVodConfig: {
                showRateBtn: true,
                rateConfig: [
                    {label: '正常', value: 1},
                    {label: '2倍', value: 2},
                    {label: '4倍', value: 4},
                    {label: '8倍', value: 8},
                    {label: '12倍', value: 12},
                    {label: '14倍', value: 14},
                    {label: '16倍', value: 16},
                ],
                useWCS: $useWCS.checked,
                useMSE: $useMSE.checked,
                useSIMD: $useSIMD.checked,
            },
            forceNoOffscreen: forceNoOffscreen,
            // muted: false,
            isHls: $isHls.checked,
            isFmp4: $isMP4.checked,

            playVodMp4UseSrc: false,
            isUseNewFullscreenWatermark: true,
            fullscreenWatermarkConfig: {
                xSpace: 100,
                ySpace: 100,
            }
        },);
        jessibuca.on('currentPts', (data) => {
            // console.log('currentPts', data);
        })

        jessibuca.on('playVodEnded', function () {
            console.log('playVodEnded');
        })

        jessibuca.on('playVodRateChange', function (rate) {
            console.log('playVodRateChange', rate);
        })

        $player.style.display = 'inline-block';
        $playVodPause.style.display = 'none';
        $destroy.style.display = 'none';
    }


    create();

    function replay() {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
                play();
            });
        } else {
            create();
            play();
        }
    }

    function play() {
        var href = $playHref.value;

        if (!href) {
            return
        }

        if (isPlayVodPause) {
            jessibuca.playVodResume()
        } else {

            jessibuca.once('start',()=>{
                enterVr();
            })

            jessibuca.playVod(href, {
                // startTime: 10,
                // forwardRate: 4
            }).catch((error) => {
                jessibuca.showErrorMessageTips(error.toString());
            });
        }
        isPlayVodPause = false;
        $player.style.display = 'none';
        $playVodPause.style.display = 'inline-block';
        $destroy.style.display = 'inline-block';
    }


    $player.addEventListener('click', function () {
        play();
    }, false)


    $useMSE.addEventListener('click', function () {
        const checked = $useMSE.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWCS.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useSIMD.addEventListener('click', function () {
        const checked = $useSIMD.checked;
        if (checked) {
            $useMSE.checked = false
            $useWCS.checked = false
            $useWASM.checked = false

        }
        replay();
    })

    $useWCS.addEventListener('click', function () {
        const checked = $useWCS.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWASM.addEventListener('click', function () {
        const checked = $useWASM.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
            $useWCS.checked = false
        }
        replay();
    })

    $isHls.addEventListener('click', function () {
        const checked = $isHls.checked;
        if (checked) {
            $isMP4.checked = false;
        }

        replay();
    })

    $isMP4.addEventListener('click', function () {
        const checked = $isMP4.checked;
        if (checked) {
            $isHls.checked = false;
        }
        replay();
    })

    $playVodPause.addEventListener('click', function () {
        $playVodPause.style.display = 'none';
        $player.style.display = 'inline-block';
        jessibuca.playVodPause();
        isPlayVodPause = true;
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
            });
        } else {
            create();
        }

    })

    $playVodForward.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.playVodForwardJumping(10);
        }
    })

    $playVodBackword.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.playVodBackwordJumping(10);
        }
    })

    function getPlayVodIsPause() {
        if (jessibuca) {
            console.log('getPlayVodIsPause', jessibuca.isPlayVodPaused());
        }
    }

    function toggleControlBar() {
        if (jessibuca) {
            jessibuca.toggleControlBar();
        }
    }

    function changeForward() {
        const forward = document.getElementById('forward').value;
        if (jessibuca) {
            jessibuca.playVodForward(forward);
        }
    }

    function playVodNextFrame() {
        if (jessibuca) {
            jessibuca.playVodNextFrame();
        }
    }

    function playVodExitNextFrameAndPlay() {
        if (jessibuca) {
            jessibuca.playVodExitNextFrameAndPlay();
        }
    }

    function enterVr() {
        if (jessibuca) {
            jessibuca.enterVr({
                initYaw: parseFloat($initYaw.value) || 0,
                initPitch: parseFloat($initPitch.value) || 0,
            }).then(() => {
                notifySuccess('进入VR');

            }).catch((error) => {
                notifyError('进入VR失败:' + error.toString());
            });
        }
    }

    function exitVr() {
        if (jessibuca) {
            jessibuca.exitVr().then(() => {
                notifySuccess('退出VR');

            }).catch((error) => {
                notifyError('退出VR失败:' + error.toString());
            });
        }
    }

    function enableSensor() {
        if (jessibuca) {
            jessibuca.vrEnableSensor().then(() => {
                console.log('enableSensor success');
                notifySuccess('申请运动传感器权限成功');
            }).catch((error) => {
                notifyError('申请运动传感器权限失败:' + error.toString());
            })
        }
    }

    function setGyroMode(type) {
        if (jessibuca) {
            jessibuca.vrSetGyroMode(type).then(() => {
                notifySuccess('设置陀螺仪模式成功');
            }).catch((error) => {
                notifyError('设置陀螺仪模式失败:' + error.toString());
            })
        }
    }


    function lookAt(target, duration) {
        if (jessibuca) {
            jessibuca.vrLookAt(target, duration);
        }
    }

</script>

</body>
</html>
